<template>
	<div class="studentcommon">
		<div class="top">
			<h2>{{titletext}}</h2>
			<h3 class="goback" @click="goback">返回</h3>
		</div>
		<div class="wrap">
			<el-form :model="ruleFrom" :rules="rules" ref="ruleFrom">
				<el-row class="row_1">
					<el-col class="col_1" :span="12" prop="name">
						<el-form-item class="el_form_item1" prop="name">
							<h3>姓&nbsp;&nbsp;&nbsp;名&nbsp;:</h3>
							<el-input class="el_input" v-model="ruleFrom.name" placeholder="请输入姓名"></el-input>
						</el-form-item>

					</el-col>
					<el-col class="col_1" :span="12">
						<el-form-item class="el_form_item1" prop="tel">
							<h3>联系方式:</h3>
							<el-input class="el_input" v-model="ruleFrom.tel" placeholder="输入联系方式"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row class="row_1">
					<el-col class="col_1" :span="12">
						<el-form-item class="el_form_item1" prop="guardian">
							<h3>监护人:</h3>
							<el-input class="el_input" v-model="ruleFrom.guardian" placeholder="请输入监护人"></el-input>
						</el-form-item>
					</el-col>
					<el-col class="col_1" :span="12">
						<el-form-item class="el_form_item1" prop="address">
							<h3>籍&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;贯&nbsp; :</h3>

							<!-- <el-cascader class="address" v-if="routeindex" style="margin-left: 10px;width: 320px;" :placeholder="ruleFrom.address" v-model="numberaddress" :options="options" @change="ChangeAddress">
							</el-cascader>
							<el-cascader v-else style="margin-left: 10px;width: 320px;" placeholder="请选择籍贯" v-model="numberaddress" :options="options" @change="ChangeAddress">
							</el-cascader> -->
							<el-cascader v-if="routeindex" class="address" style="margin-left: 10px;width: 320px;" size="large" :placeholder="ruleFrom.address" :options="provinceAndCityData" v-model="selectedOptions" @change="ChangeAddress">
							</el-cascader>
							<el-cascader v-else size="large" style="margin-left: 10px;width: 320px;" placeholder="请选择籍贯" :options="provinceAndCityData" v-model="selectedOptions" @change="ChangeAddress">
							</el-cascader>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row class="row_1">
					<el-col class="col_1" :span="12">
						<el-form-item class="el_form_item1" prop="sexvalue">
							<h3>性&nbsp;&nbsp;&nbsp;别&nbsp;:</h3>
							<el-select class="el_input" v-model="ruleFrom.sexvalue" placeholder="请选择性别">
								<el-option v-for="item in ruleFrom.sexvalueoptions" :key="item.value"
									:label="item.value" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>

					</el-col>
					<el-col class="col_1" :span="12">
						<el-form-item class="el_form_item1" prop="nation">
							<h3>民&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;族&nbsp;&nbsp;:</h3>
							<el-input class="el_input" v-model="ruleFrom.nation" placeholder="请输入民族"></el-input>
						</el-form-item>

					</el-col>
				</el-row>
				<el-row class="row_1">
					<el-col class="col_1" :span="12">
						<el-form-item class="el_form_item1" prop="classvalue">
							<h3>班&nbsp;&nbsp;&nbsp;级&nbsp;:</h3>
							<template v-if="flag">
								<el-select class="el_input" v-model="ruleFrom.className" placeholder="请选择班级">
									<el-option v-for="item in ruleFrom.classoptions" :key="item.id" :label="item.value"
										:value="item.value">

									</el-option>
								</el-select>
							</template>
							<template v-if="!flag">
								<el-select class="el_input" v-model="ruleFrom.classvalue" placeholder="请选择班级">
									<el-option v-for="item in ruleFrom.classoptions" :key="item.id" :label="item.value"
										:value="item.id">
									</el-option>

								</el-select>
							</template>

						</el-form-item>
					</el-col>
					<el-col class="col_1" :span="12">
						<el-form-item class="el_form_item1" prop="timevalue">
							<h3>入学时间:</h3>
							<el-date-picker class="el_input" v-model="ruleFrom.timevalue" type="date"
								placeholder="选择日期">
							</el-date-picker>
						</el-form-item>

					</el-col>
				</el-row>
				<el-row class="row_1">
					<el-col class="col_1" :span="12">
						<el-form-item class="el_form_item1" prop="age">
							<h3>年&nbsp;&nbsp;&nbsp;龄&nbsp;:</h3>
							<el-input class="el_input" v-model="ruleFrom.age" placeholder="请输入年龄"></el-input>
						</el-form-item>

					</el-col>
					<el-col class="col_1" :span="12">
						<el-form-item class="el_form_item1" prop="hobby">
							<h3>兴趣爱好:</h3>
							<el-input class="el_input" v-model="ruleFrom.hobby" placeholder="请输入兴趣爱好"></el-input>
						</el-form-item>

					</el-col>
				</el-row>
				<el-row class="row_1" v-if="flag">
					<el-col class="col_1" :span="12">
						<el-form-item class="el_form_item1" prop="curid">
							<h3>学&nbsp;&nbsp;&nbsp;号&nbsp;:</h3>
							<el-input class="el_input" v-model="ruleFrom.curid" placeholder="请输入学号"></el-input>
						</el-form-item>

					</el-col>
				</el-row>
			</el-form>

		</div>
		<div class="btngroup">
			<el-button class="btn2" type="primary" @click="determine('ruleFrom')">确定</el-button>
			<el-button class="btn2" type="info" @click="cancel('ruleFrom')">取消</el-button>
		</div>
	</div>

</template>

<script>
	import {
		provinceAndCityData
	} from 'element-china-area-data'
	import {
		codeToText,
		regionData
	} from 'element-china-area-data'
	export default {
		data() {
			return {

				baseUrl: require("../js/baseUrl.js").baseUrl,
				titletext: "添加新的学生",
				routeindex: "",
				flag: true,
				//选择籍贯
				provinceAndCityData,
				selectedOptions: [],

				
				// classId:"",
				stunum: "",
				cla: "",
				stuinfo: [],
				changeclassId: "",
				ruleFrom: {
					name: "",
					age: "",
					guardian: "",
					address: "",
					nation: "",
					hobby: "",
					curid: "",
					tel: "",
					timevalue: "",
					sexvalue: "",
					classvalue: "", //选项id
					className: "", //班级名称
					sexvalueoptions: [{
						label: '男',
						value: '男'
					}, {
						label: '女',
						value: '女'
					}, ],
					classoptions: []
				},
				rules: {
					name: [{
						required: true,
						message: "姓名不能为空!",
						trigger: "blur"
					}],
					age: [{
						required: true,
						message: "年龄不能为空!",
						trigger: "blur"
					}],
					guardian: [{
						required: true,
						message: "监护人不能为空!",
						trigger: "blur"
					}],
					address: [{
						required: true,
						message: "籍贯不能为空!",
						trigger: "blur"
					}],
					nation: [{
						required: true,
						message: "民族不能为空!",
						trigger: "blur"
					}],
					hobby: [{
							required: true,
							message: "爱好不能为空!",
							trigger: "blur"
						},
						{
							pattern: /^.{0,25}$/,
							message: '长度最大25',
							trigger: 'blur'
						},
					],
					// m-n位的数字：^\d{m,n}$
					curid: [{
							required: true,
							message: "学号不能为空!",
							trigger: "blur"
						},
						{
							pattern: /^\w{0,10}$/,
							message: '只能是10位数字、字母、下划线',
							trigger: 'blur'
						},
					],
					timevalue: [{
						required: true,
						message: "时间不能为空!",
						trigger: "blur"
					}],
					sexvalue: [{
						required: true,
						message: "性别不能为空!",
						trigger: "blur"
					}],
					// classvalue:[
					// 	{required:true,message:"班级不能为空!",trigger:"blur"}
					// ],
					tel: [{
							required: true,
							message: "联系方式不能为空!",
							trigger: "blur"
						},
						{
							pattern: /^[\d]{11}$/,
							message: '只能是11位数字',
							trigger: 'blur'
						},
					],

				}
			}
		},
		methods: {
			goback() {
				this.$router.push("/studentmanager/student")
			},
			//选择籍贯地址
			ChangeAddress(value) {

				this.ruleFrom.address = codeToText[this.selectedOptions[0]] + '' + codeToText[this.selectedOptions[
					1]]+''
				console.log(this.ruleFrom.address)
			},
			//转换时间  年-月-日
			filterTime(time) {
				var date = new Date(time);
				var y = date.getFullYear();
				var m = date.getMonth() + 1;
				m = m < 10 ? "0" + m : m;
				var d = date.getDate();
				d = d < 10 ? "0" + d : d;
				return y + "-" + m + "-" + d;
			},
			determine(formName) {
				if (this.$route.query.index == 1) {
					//修改学生信息
					// SchoolSys/stu/update
					// console.log(this.stuinfo)
					this.$refs[formName].validate((valid) => {
						if (this.ruleFrom.classvalue == "暂无") {
							this.ruleFrom.classvalue = 0
						}
						if (valid) {
							this.$http.post(this.baseUrl + "SchoolSys/stu/update", {
								stuId: this.ruleFrom.curid,
								clazzId: this.ruleFrom.classvalue,
								stuNum: this.stunum,
								stuName: this.ruleFrom.name,
								stuAge: this.ruleFrom.age,
								stuSex: this.ruleFrom.sexvalue,
								stuPhone: this.ruleFrom.tel,
								stuTime: this.filterTime(this.ruleFrom.timevalue),
								stuNation: this.ruleFrom.nation,
								stuPerson: this.ruleFrom.guardian,
								stuAddress: this.ruleFrom.address,
								stuHabby: this.ruleFrom.hobby
							}).then(res => {
								if (res.data.code == 200) {
									this.ruleFrom.numberaddress = this.numberaddress
									// console.log(res)
									this.$message({
										type: "success",
										message: "修改成功"
									})
									this.$router.push("/studentmanager/student")
								}

							})
						} else {
							// console.log('error submit!!');
							return false;
						}
					});
				} else {
					//添加学生信息
					// SchoolSys/stu/insert
					this.$refs[formName].validate((valid) => {
						if (valid) {
							if (this.ruleFrom.className == "" || this.ruleFrom.className == undefined || this
								.ruleFrom.className == null) {
								this.cla = null
							} else {
								this.cla = this.ruleFrom.className
							}
							this.$http.post(this.baseUrl + "SchoolSys/stu/insert", {
								stuNum: this.ruleFrom.curid,
								stuName: this.ruleFrom.name,
								stuAge: Number(this.ruleFrom.age),
								stuSex: this.ruleFrom.sexvalue,
								stuPhone: this.ruleFrom.tel,
								stuPerson: this.ruleFrom.guardian,
								stuNation: this.ruleFrom.nation, //民族
								stuAddress: this.ruleFrom.address,
								stuHabby: this.ruleFrom.hobby,
								clazzName: this.cla,
								stuTime: this.filterTime(this.ruleFrom.timevalue)
							}).then(res => {
								// console.log(res)
								if (res.data.code == 200) {
									console.log(this.numberaddress)
									this.ruleFrom.numberaddress = this.numberaddress
									this.$message({
										type: "success",
										message: "添加成功"
									})
									this.$router.push("/studentmanager/student")
								}

							}).catch(function(error) {
								// console.log(error.message)
							})

						} else {
							// console.log('error submit!!');
							return false;
						}
					});

				}
			},
			cancel(formName) {
				this.$refs[formName].resetFields();
				this.ruleFrom.name = ""
				this.ruleFrom.age = ""
				this.ruleFrom.guardian = ""
				this.numberaddress = ""
				this.ruleFrom.nation = ""
				this.ruleFrom.hobby = ""
				this.ruleFrom.curid = ""
				this.ruleFrom.tel = ""
				this.ruleFrom.timevalue = ""
				this.ruleFrom.sexvalue = ""
				this.ruleFrom.className = ""
				this.ruleFrom.classvalue = ""

			}
		},
		mounted() {
			//修改数据
			if (this.$route.query.index == 1) {
				this.routeindex = 1
				this.flag = false
				this.titletext = "修改当前学生的信息"

				//先获取默认数据值
				this.stuinfo = JSON.parse(sessionStorage.getItem('info'))
				console.log(this.stuinfo)
				this.ruleFrom.curid = this.stuinfo.stuId
				this.ruleFrom.name = this.stuinfo.stuName
				this.ruleFrom.tel = this.stuinfo.stuPhone
				this.ruleFrom.guardian = this.stuinfo.stuPerson
				this.ruleFrom.address = this.stuinfo.stuAddress
				this.ruleFrom.sexvalue = this.stuinfo.stuSex
				this.ruleFrom.timevalue = this.stuinfo.stuTime
				this.ruleFrom.age = this.stuinfo.stuAge
				this.ruleFrom.nation = this.stuinfo.stuNation
				this.ruleFrom.hobby = this.stuinfo.stuHabby
				this.stunum = this.stuinfo.stuNum
				if (this.stuinfo.clazzName == "暂无") {
					this.ruleFrom.classvalue = "暂无"
				} else {
					this.ruleFrom.classvalue = this.stuinfo.clazzId
				}
			}
			//添加数据
			//班级搜索
			// SchoolSys/clazz/like
			this.$http.post(this.baseUrl + "SchoolSys/stu/clazzlist", {

			}).then(res => {
				// console.log(res)
				if (res.data.code == 200) {
					var sum = res.data.data
					for (var i = 0; i < sum.length; i++) {
						var s = {
							value: sum[i].clazzName,
							id: sum[i].clazzId
						}
						this.ruleFrom.classoptions = [s, ...this.ruleFrom.classoptions]

					}
				} else {
					this.$message.error("班级搜索失败")
				}

			})
		}
	}
</script>

<style>
	.studentcommon .top {
		display: flex;
		justify-content: space-between;
		margin-left: 20px;
		margin-right: 20px;
		margin-top: 20px;
	}

	.studentcommon .goback {
		cursor: pointer;
		margin-right: 30px;
	}

	.studentcommon .top h2 {}

	.studentcommon .wrap {
		margin-left: 20px;
		margin-right: 20px;
		margin-top: 30px;
	}

	.studentcommon .wrap h3 {
		/* width: 90px; */
		height: 30px;
		line-height: 10px;
		display: inline-block;
	}

	.studentcommon .wrap .el_input {
		width: 320px;
		margin-left: 10px;
		margin-bottom: 10px;
	}

	.studentcommon .btngroup {
		margin-left: 10%;
		margin-top: 3%;
	}

	.studentcommon .btn2 {
		width: 140px;
		line-height: 20px;
		font-size: 15px;
		margin-right: 4%;
	}

	.studentcommon .address .el-input__inner::placeholder {
		color: #606266;
	}
</style>